@mixin input-focus($glow_width)
{
	@include transition-property(-webkit-box-shadow border-color);
	@include transition-timing-function(linear);
	@include transition-duration(500ms);
	outline: none;
	
	&:focus {
		@include box-shadow(rgba(#47819f, 0.6), 0px, 0px, $glow_width);
		border-color: #47819f;
	}
}

* {
	@include box-sizing('border-box');
}

body, html {
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 200;
}

a
{
	text-decoration: none;
	color: #5ea6df;
	
	&:hover
	{
		text-decoration: underline;
	}
}

$container_width: 700px;

div#container
{
	width: $container_width;
	margin: 30px auto;
	
	h1
	{
		font-family: 'LeagueGothicRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 5em;
		text-transform: uppercase;
		margin: 0.5em 0;
		text-align: center;
		color: #00243b;
		text-shadow: 3px 3px rgba(0,0,0,0.1);
		position: relative;
		
		a
		{
			color: inherit;
			
			&:hover
			{
				text-decoration: none;
			}
		}
		
		.codex
		{
			color: #47819f;
		}
		
		.beta
		{
			position: absolute;
			font-size: 0.3em;
			top: 5px;
		}
	}
	
	h2
	{
		font-size: 1.4em;
		margin: 0.1em 0 0.5em 0;
	}
	
	h3
	{
		font-size: 1.2em;
		font-weight: 400;
		margin:  1.5em 0 0.8em 0;
	}
	
	p
	{
		margin: 1.4em 0;
	}
	
	$form_padding: 20px;
	
	form#search
	{
		padding: $form_padding;
		background-image: url('img/noise.png');
		background-color: #EEE;
		@include linear-gradient(color-stops(#F0F0F0, #DCDCDC));
		@include border-radius(3px);
		border: 1px solid #CCC;
		margin-bottom: 2em;
		position: relative;
		@include clearfix;
		
		input, button
		{
			height: 50px;
			outline: 0;
		}
		
		input
		{
			width: $container_width - (2*$form_padding) - 150px;
			border: transparent;
			font-size: 2em;
			color: #333;
			padding: 0.3em;
			@include border-radius(3px);
			@include box-shadow(#FFF, 0, 1px, 0);
			border: 1px solid #CCC;
			float: left;
			@include input-focus(5px);
			
			&.placeholder
			{
				color: #aaa;
			}
		}
		
		button
		{
			border: 1px solid #00243b;
			@include border-radius(3px);
			@include box-shadow(#FFF, 0, 1px, 0);
			background: #5ea6df;
			@include linear-gradient(color-stops(#5ea6df, #47819f));
			font-size: 2em;
			float: right;
			color: rgba(255, 255, 255, 0.9);
			font-family: 'LeagueGothicRegular', "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			height: 49px;
			padding: 0 1em;
		}
	}
	
	div#searchsummary
	{
		margin-top: -1em;
		margin-bottom: 2em;
		text-align: center;
		font-style: italic;
		color: #666;
	}
	
	p.pagination
	{
		text-align: center;
		font-size: 0.8em;
		margin-top: 0em;
	}
	
	div#a2z
	{
		border-top: 1px solid #DDD;
		margin-top: 8em;
		padding-top: 1em;
		font-size: 0.8em;
		color: #BBB;
		text-align: center;
		
		ul
		{
			display: inline;
			
			li
			{
				display: inline;
				margin-right: 0.5em;
				
				&:first-child
				{
					margin-left: 0.5em;
				}
				
				a
				{
					color: #999;
				}
			}
		}
	}
}